<template>
  <div class="image-text-editor">
    <!-- 样式切换按钮 -->
    <el-form ref="editorFormRef" :model="editorForm" label-width="auto">
      <!-- 样式切换按钮 -->
      <el-form-item label="布局样式">
        <div class="style-buttons">
          <el-button v-for="style in styleOptions" :key="style.value" type="primary" :plain="editorForm.class.value !== style.value" @click="switchStyle(style.value)">
            {{ style.label }}
          </el-button>
        </div>
      </el-form-item>

      <!-- 图片设置（宽度） -->
      <el-form-item label="图片宽度">
        <el-slider v-model="editorForm.image.width.percentValue" :min="1" :max="100" :format-tooltip="value => `${value}%`" @change="handleImageWidthChange" />
      </el-form-item>

      <!-- 卡片背景设置 -->
      <el-form-item label="背景颜色">
        <el-color-picker v-model="editorForm.background.color" />
      </el-form-item>

      <!-- 卡片标题显示与隐藏设置 -->
      <el-form-item label="显示标题">
        <el-switch v-model="editorForm.label.display.value" :active-value="'block'" :inactive-value="'none'" />
      </el-form-item>

      <!-- 内边距设置 -->
      <el-form-item label="内边距">
        <div class="spacing-box">
          <div class="spacing-top">
            <el-input-number v-model="editorForm.padding.topPxValue" :min="0" size="small" @change="handlePaddingChange" />
          </div>
          <div class="spacing-middle">
            <el-input-number v-model="editorForm.padding.leftPxValue" :min="0" size="small" @change="handlePaddingChange" />
            <div class="spacing-center"></div>
            <el-input-number v-model="editorForm.padding.rightPxValue" :min="0" size="small" @change="handlePaddingChange" />
          </div>
          <div class="spacing-bottom">
            <el-input-number v-model="editorForm.padding.bottomPxValue" :min="0" size="small" @change="handlePaddingChange" />
          </div>
        </div>
      </el-form-item>

      <!-- 外边距设置 -->
      <el-form-item label="外边距">
        <div class="spacing-box">
          <div class="spacing-top">
            <el-input-number v-model="editorForm.margin.topPxValue" size="small" @change="handleMarginChange" />
          </div>
          <div class="spacing-middle">
            <el-input-number v-model="editorForm.margin.leftPxValue" size="small" @change="handleMarginChange" />
            <div class="spacing-center"></div>
            <el-input-number v-model="editorForm.margin.rightPxValue" size="small" @change="handleMarginChange" />
          </div>
          <div class="spacing-bottom">
            <el-input-number v-model="editorForm.margin.bottomPxValue" size="small" @change="handleMarginChange" />
          </div>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useStore } from 'vuex'


const store = useStore()
const editorForm = computed(() => store.state.template.editorVariable)
// 样式选项
const styleOptions = [
  { label: '左图右文', value: 'left-img' },
  { label: '右图左文', value: 'right-img' },
  { label: '上图下文', value: 'top-img' },
  { label: '无图', value: 'no-img' }
]

// 切换样式
const switchStyle = style => {
  const card = document.querySelector('.card')
  const cardImg = document.querySelector('.card-img')

  if (card) {
    card.classList.remove('left-img', 'right-img', 'top-img', 'no-img')
    card.classList.add(style)
  }

  if (cardImg) {
    cardImg.style.display = style === 'no-img' ? 'none' : ''
  }

  editorForm.value.class.value = style
}

// 处理图片宽度变化
const handleImageWidthChange = () => {
  editorForm.value.image.width.value = editorForm.value.image.width.percentValue + '%'
}

// 处理内边距变化
const handlePaddingChange = () => {
  editorForm.value.padding.top = pxToRem(editorForm.value.padding.topPxValue)
  editorForm.value.padding.right = pxToRem(editorForm.value.padding.rightPxValue)
  editorForm.value.padding.bottom = pxToRem(editorForm.value.padding.bottomPxValue)
  editorForm.value.padding.left = pxToRem(editorForm.value.padding.leftPxValue)
}

// 处理外边距变化
const handleMarginChange = () => {
  editorForm.value.margin.top = pxToRem(editorForm.value.margin.topPxValue)
  editorForm.value.margin.right = pxToRem(editorForm.value.margin.rightPxValue)
  editorForm.value.margin.bottom = pxToRem(editorForm.value.margin.bottomPxValue)
  editorForm.value.margin.left = pxToRem(editorForm.value.margin.leftPxValue)
}

// px转rem
const pxToRem = pxValue => {
  // 保留两位小数
  const remValue = parseFloat(pxValue / 100).toFixed(2)
  return remValue + 'rem'
}
</script>

<style lang="scss" scoped>
.style-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* 边距控制相关样式 */
.spacing-box {
  position: relative;
  width: 80%;
  height: 100px;
  border: 1px dashed #dcdfe6;
  margin: 20px 0;

  .spacing-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #909399;
    font-size: 14px;
  }

  .spacing-top {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
  }

  .spacing-bottom {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%);
  }

  .spacing-middle {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;

    :deep(.el-input-number) {
      &:first-child {
        transform: translateX(-50%);
      }
      &:last-child {
        transform: translateX(50%);
      }
    }
  }
}

/* Element Plus 组件样式覆盖 */
:deep(.el-input-number) {
  width: 110px;
  background-color: white; // 确保输入框不会被边框遮挡
  z-index: 1; // 确保输入框在边框之上
}
</style>
